$package('sun.web.dashboard');
sun.web.dashboard=function(params){
	this.params=params;
};
sun.web.dashboard.prototype={
		init : function(){
			var self=this;
			this.initItems();
			this.initMenu();
		},
		initMenu : function(){
			var self=this;
			var option=[{id:'chartbar',name:'柱状图',callback:function(){self.createChart('chartbar','柱状图')}},
			            null,
			            {id:'chartline',name:'面积图',callback:function(){self.createChart('chartline','面积图')}},
						null,
			            {id:'chartline',name:'面积图',callback:function(){self.createChart('chartline','面积图')}}
			           ];
			this.createMenu(option);
		},
		createChart : function(type,name){
			this.createChartBox(null,name,type,null,'blue');
		},
		createMenu : function(opts){
			var self=this;
			var db=document.body;
			var menu=this.$menu=Sun.CE('div','menu','easyui-menu');
			menu.style.width='120px';
			for(var i=0;i<opts.length;i++){
				var opt=opts[i];
				var item=null;
				if(!opt){
				  item=Sun.CE('div',null,'menu-sep');
				}else{
					item=Sun.CE('div',opt.id);
					item.innerText=opt.name;
					if(opt.icon){
						item.setAttribute('icon',opt.icon);
					}
					item.onclick=opt.callback;
				}
				menu.appendChild(item);
			}
			db.appendChild(menu);
			document.oncontextmenu=function(e){
				 $('#menu').menu('show', {
				     left: e.pageX,
				     top: e.pageY
				    });
				    return false;
			}
		},
		createChartBox : function(id,name,type,pos,theme){
			var self=this,
			    pos=pos||'';
			var db=document.body;
			id=id||Sun.UUID();
			var dialog=Sun.CE('div',id,"easyui-draggable easyui-resizable");
			dialog.style.width=pos.width||'500px';
			dialog.style.height=pos.height||'300px';
			dialog.style.position='absolute';
			dialog.type=type||'bar';
			dialog.theme=theme||'';
			dialog.name=name||'';
			dialog.style.border='1px solid rgb(204, 204, 204)';
			var title=Sun.CE('div','dt',"title");
			var close=Sun.CE('div','dc',"close");
			var edite=Sun.CE('div','de',"edite");
			title.innerText=name?name:'可以拖拽';
			var body=Sun.CE('div','db','chart-body');
			edite.onclick=function(){
				self.setupChart(dialog);
			}
			close.onclick=function(){
				Sun.invoke('../dashboard/delete',dialog.id,function(error){
					if(error)alert(error);
					else $(dialog).remove();
				});
			}
			dialog.$body=body;
			dialog.appendChild(close);
			dialog.appendChild(edite);
			dialog.appendChild(title);
			dialog.setAttribute('data-options',"handle:'#dt'");
			dialog.appendChild(body);
			db.appendChild(dialog);
			dialog.style.left=pos.left||'0px';
			dialog.style.top=pos.top||'0px';
			this.resize(dialog);
			$(dialog).resizable({disabled : false,
				                 onResize : function(){self.resize(this)}
				                 });
			$(dialog).draggable({onStopDrag : function(){self.savePosition(this)}});
			this.savePosition(dialog);
			this.initChart(dialog);  
		},
		setupChart : function(dialog){
			var self=this;
			this.createDialog();
		},
		createDialog : function(){
			if($('#setDt').length>0){
				this.openDialog();
				return;
			}
			this.isHideMask(false);
			var self=this;
			var db=document.body;
			var dg=Sun.CE('div','setDt','easyui-dialog');
			dg.style.width='500px';
			dg.style.height='300px';
			var buttons={
					    title:'数据设置',
					    iconCls:'icon-ok',
						resizable:true,
						collapsible:true,
						maximizable:true,
						buttons:[{
						text:'确定',
						iconCls:'icon-ok',
						handler:function(){
							self.closeDialog();
						}
					},{
						text:'取消',
						iconCls:'icon-cancel',
						handler:function(dg){
							self.closeDialog();
						}
					}]};
			$(dg).dialog(buttons);
		},
		closeDialog : function(){
			var fg=$("#setDt").parent().is(":hidden");
			if(!fg)$('#setDt').dialog('close');
			this.isHideMask(true);
		},
		openDialog : function(){
			var fg=$("#setDt").parent().is(":hidden");
			if(fg)$('#setDt').dialog('open');
			this.isHideMask(false);
		},
		isHideMask : function(flg){
			if(!this.$mask){
				var db=document.body;
				var mask=null;
				mask=this.$mask=Sun.CE('div','mask','dialog-mask');
				db.appendChild(mask);
			}
			if(flg){
				this.$mask.style.display="none";
			}else{
				this.$mask.style.display="";
			}
		},
		initItems : function(){
			var self=this;
			Sun.invoke('../dashboard/load',[],function(datas){
				if(datas){
					for(var i=0;i<datas.length;i++){
						var data=datas[i];
						var pos=Sun.toStr(data.position);
						self.createChartBox(data.id,data.title,data.type,pos,data.theme);
					}
					
				}
			});
		},
		savePosition : function(dialog){
			if(!dialog)return;
			var style=dialog.style;
			var pos={
					width:style.width,
					height:style.height,
					left:style.left,
					top:style.top
			};
			pos=JSON.stringify(pos);
			var param={
					id:dialog.id,
					title:dialog.name,
					type:dialog.type,
					position:pos,
					theme:dialog.theme
			};
			Sun.invoke('../dashboard/save',param,function(error){if(error)alert(error)});
		},
		resize : function(dialog){
			dialog.$body.style.width=(parseInt(dialog.style.width)-10)+'px';
			dialog.$body.style.height=(parseInt(dialog.style.height)-30)+'px';
			if(dialog.$chart)dialog.$chart.resize();
		},
		initChart : function(dialog){
			dialog.$chart = echarts.init(dialog.$body,{});
			var option=Sun.Option.getDefaultOption(dialog.type);
			var theme=Sun.Theme.getDefaultTheme(dialog.theme);
			dialog.$chart.setOption(option);
			dialog.$chart.setTheme(theme);
			dialog.$chart.resize();
		}
};
Sun.initClass('sun.web.dashboard');